import { Input, NavBar, TextArea } from 'antd-mobile'
import { useState } from 'react'
import styles from './index.module.scss'
import { InputType } from '../../index'
// 父传子props属性类型
type Props = {
  // type: '' | 'name' | 'intro'
  type: InputType['type'] //这个就是获取InputType中type属性的类型
  //父组件传递的关闭弹层的方法
  hideModal: () => void
  value: string
  onUpdateUser(type: string, value: string): void
}

const EditInput = ({ hideModal, value, onUpdateUser, type }: Props) => {
  const [inputValue, setInputValue] = useState(value)
  const isName = type === 'name'
  return (
    <div className={styles.root}>
      <NavBar
        onBack={hideModal}
        className="navbar"
        right={
          <span
            onClick={() => {
              // 修改的是昵称还是简介？=》通过type告诉父组件修改的属性是什么
              onUpdateUser(type, value)
            }}
            className="commit-btn">
            提交
          </span>
        }>
        编辑{isName ? '昵称' : '简介'}
      </NavBar>

      <div className="edit-input-content">
        <h3>{isName ? '昵称' : '简介'}</h3>

        {isName ? (
          <div className="input-wrap">
            <Input
              placeholder="请输入"
              // 受控组件=》类似vue的双向绑定
              value={inputValue}
              onChange={setInputValue}
            />{' '}
          </div>
        ) : (
          <TextArea
            className="textarea"
            placeholder="请输入"
            // 展示：右下角的字数统计
            showCount
            // 指定内容最大长度
            maxLength={100}
            // 指定 文本域 展示内容的行数（文本域高度）
            rows={4}
            // 受控处理，这里的value传的值不能是null，所有配置的时候需要通过短路运算符尝试
            value={inputValue}
            onChange={setInputValue}
          />
        )}
      </div>
    </div>
  )
}

export default EditInput
